<template>
	<view class="layout">
<!-- 		<view class="name">
			王子航
		</view>
		<view class="">
			{{ userInfoStore.userInfo._id ?? "未知" }}
		</view> -->
		<!-- <image src="/static/uni.png" mode="" class="avatar"></image> -->
		
		<view class="optionsArea">
			<view class="optionItem" @click="onClickModifyUserName">
				<view class="">
					<uni-icons type="person"></uni-icons>
					用户名
				</view>
				<view class="">
					{{ userInfoStore.userInfo.userName ?? "未知" }}
					<uni-icons type="arrow-right"></uni-icons>
				</view>
			</view>
			
			<view class="optionItem">
				<view class="itemLeft">
					<uni-icons type="person"></uni-icons>
					账号
				</view>
				<view class="itemRight">
					{{ userInfoStore.userInfo.accountNumber }}
					<!-- <uni-icons type="arrow-right"></uni-icons> -->
				</view>
			</view>
			
			<view class="optionItem">
				<view class="itemLeft">
					<uni-icons type="person"></uni-icons>
					UUID
				</view>
				<view class="itemRight">
					{{ userInfoStore.userInfo.uuid }}
					<!-- <uni-icons type="arrow-right"></uni-icons> -->
				</view>
			</view>
			
			<view class="optionItem">
				<view class="">
					<uni-icons type="person"></uni-icons>
					角色
				</view>
				<view class="">
					{{ role }}
					<!-- <uni-icons type="arrow-right"></uni-icons> -->
				</view>
			</view>
			
			<view class="optionItem" @click="goToFeedbackList" v-if="userInfoStore.userInfo.role !== 2">
				<view class="">
					反馈列表
				</view>
				<view class="">
					跳转
					<uni-icons type="arrow-right"></uni-icons>
				</view>
			</view>
			
			<view class="optionItem" v-if="userInfoStore.userInfo.role !== 2">
				<view class="itemLeft">
					剩余指导学新次数
				</view>
				<view class="itemRight">
					{{ userInfoStore.userInfo.role === 0 ? userInfoStore.userInfo.studyNewTimes ?? 0 : userInfoStore.selectedStudentInfo.studyNewTimes ?? 0 }}
				</view>
			</view>
			
			<view class="optionItem" v-if="userInfoStore.userInfo.role !== 2">
				<view class="itemLeft">
					剩余指导复习次数
				</view>
				<view class="itemRight">
					{{ userInfoStore.userInfo.role === 0 ? userInfoStore.userInfo.reviewTimes ?? 0 : userInfoStore.selectedStudentInfo.reviewTimes ?? 0 }}
				</view>
			</view>
			
			<view class="optionItem" @click="onClickSelectStudent" v-if="userInfoStore.userInfo.role === 1">
				<view class="">
					<uni-icons type="person"></uni-icons>
					指导学生
				</view>
				<view class="">
					{{ studentName }}
					<uni-icons type="arrow-right"></uni-icons>
				</view>
			</view>
			
			<view class="optionItem" @click="onClickManageTimes" v-if="userInfoStore.userInfo.role === 2">
				<view class="">
					管理次数
				</view>
				<view class="">
					<uni-icons type="arrow-right"></uni-icons>
				</view>
			</view>
			
			<view class="optionItem" @click="goToFileList" v-if="userInfoStore.userInfo.role === 2">
				<view class="">
					查看词库列表
				</view>
				<view class="">
					<uni-icons type="arrow-right"></uni-icons>
				</view>
			</view>
			
			<view class="optionItem" @click="goToAddFile" v-if="userInfoStore.userInfo.role === 2">
				<view class="">
					上传文件
				</view>
				<view class="">
					<uni-icons type="arrow-right"></uni-icons>
				</view>
			</view>
			
			<view class="optionItem" @click="onClickAddTeacher" v-if="userInfoStore.userInfo.role === 2">
				<view class="">
					<uni-icons type="person"></uni-icons>
					添加老师
				</view>
				<view class="">
					<uni-icons type="arrow-right"></uni-icons>
				</view>
			</view>
			
			<view class="optionItem" @click="onClickManageTeacher" v-if="userInfoStore.userInfo.role === 2">
				<view class="">
					<uni-icons type="person"></uni-icons>
					管理老师
				</view>
				<view class="">
					老师数量: {{ teacherCount }}
					<uni-icons type="arrow-right"></uni-icons>
				</view>
			</view>

			<!-- <scroll-view scroll-y="true" >
				<view v-for="item in 12">
					<view class="optionItem">
						<view class="">
							<uni-icons type="person"></uni-icons>
							1233
						</view>
						<uni-icons type="arrow-right"></uni-icons>
					</view>
				</view>
			</scroll-view> -->
			
			<view class="wxButton" v-if="userInfoStore.userInfo.role != 2" @click="bindWx">
				绑定微信
			</view>
			
			<view class="logout" @click="logout">
				注销
			</view>
		</view>
		
		<uni-popup ref="modifyDialog" type="center" :is-mask-click="false">
			<view class="modifyDialog">
				<view class="title">
					修改用户名
				</view>
				<input  class="input" v-model="inputValue" maxlength="10" placeholder="请输入内容" />
				<view class="buttonRow">
					<view class="confirm" @click="confirm">确认</view>
					<view class="cancel" @click="cancel">取消</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { useUserInfoStore } from '../../../store';
	import { storeToRefs } from "pinia";
	import {onLoad, onShow, onUnload, onReady} from '@dcloudio/uni-app';
	//获得store实例对象
	const userInfoStore = useUserInfoStore()
	
	// const { userInfo } = storeToRefs(userInfoStore)
	
	const modifyDialog = ref(null);
	const inputValue = ref('');
	
	const teacherCount = ref(0)
	
	//橘色
	const role = computed(() => {
		switch(userInfoStore.userInfo.role){
			case 0:
				return "学生";
			case 1:
				return "老师";
			case 2:
				return "管理员";
			default:
				return "学生";
		}
	})
	
	//橘色
	const studentName = computed(() => {
		if (userInfoStore.selectedStudentInfo.userName === "") {

		// if(userInfoStore.selectedStudentInfo.userName === undefined){
			return "未选择"
		} else {
			return userInfoStore.selectedStudentInfo.userName
		}
	})
	
	// onUnload(()=>{
		
	// })
	
	
	onShow(async () => {
		if(userInfoStore.userInfo.role === 0) {
			const userInfoRes = await uniCloud.callFunction({
				name: 'getUserInfo',
				data: {
				  uuid: userInfoStore.userInfo.uuid
				}
			});
			userInfoStore.setUserInfo(userInfoRes.result.data)
			
		} else if(userInfoStore.userInfo.role === 1){
			if(userInfoStore.selectedStudentInfo.uuid !== ""){
				const userInfoRes = await uniCloud.callFunction({
					name: 'getUserInfo',
					data: {
					  uuid: userInfoStore.selectedStudentInfo.uuid
					}
				});
				userInfoStore.setSelectedStudentInfo(userInfoRes.result.data)
			}

		} else if(userInfoStore.userInfo.role === 2){
			refreshTeacherCount()
		}
		
	})
	
	function refreshTeacherCount() {
		uniCloud.callFunction({
			name: "getTeachers",
		}).then(res => {
			teacherCount.value = res.result.data.length
		})
	}
	
	function logout(){
		uni.showModal({
			title:"注销",
			content:"确认注销账号吗？",
			success(res) {
				if(res.confirm){
					userInfoStore.clearUserInfo()
					uni.reLaunch({
						url: "/pages/login/login"
					})
				}
			}
		})

	}
	
	function goToFeedbackList(){
		uni.navigateTo({
			url: "/pages/feedback-list/feedback-list"
		})
	}
	
	function goToFileList() {
		uni.navigateTo({
			url: "/pages/word-bank-list/word-bank-list"
		})
	}
	
	function goToAddFile() {
		uni.navigateTo({
			url: "/pages/add-file/add-file"
		})
	}
	
	function bindWx() {
		uni.showModal({
			title:"绑定微信",
			content:"是否绑定当前微信？",
			success(res) {
				if(res.confirm){
					uni.showLoading({
						mask: true
					})
					uni.getUserInfo({
					    provider: 'weixin',
					    desc: "登录的数据",
					    success(user) {
					        user.authResult
					        uni.login({
					            provider: 'weixin',
					            onlyAuthorize: true,
					            success(lres) {
					                console.log(lres, "请求微信登录返回的数据")
					                if (lres.code) {
										// uniCloud.callFunction({
										//     name: "wxLogin",
										//     data: {
										//         code: lres.code
										//     }
										// }).then(res => {
					                    uniCloud.callFunction({
					                    	name: "bindWxToAccount",
					                    	data: {
					                    		uuid: userInfoStore.userInfo.uuid,
												code: lres.code
					                    	}
					                    }).then(res => {
					                        console.log("登录/注册成功 ====> ", res)
											
											if(res.result.code === 0){
												uni.showToast({
													title:"该微信已被绑定",
													icon:"error"
												})
												return;
											}
											userInfoStore.setUserInfo(res.result)
											
											// 登录成功后跳转到首页或其他页面
											// uni.switchTab({
											// 	url: '/pages/tabs/progress/progress'
											// })
											uni.hideLoading()
										})
					                }
					            }
					        })
					    }
					})
					
				}
			}
		})


	}
	
	function onClickManageTimes() {
		uni.navigateTo({
			url: "/pages/manage-times/manage-times"
		})
	}
	
	//点击选择学生
	function onClickSelectStudent() {
		uni.navigateTo({
			url:"/pages/studentsList/studentsList"
		})
	}
	
	//点击添加老师
	function onClickAddTeacher() {
		uni.navigateTo({
			url:"/pages/addTeacherList/addTeacherList"
		})
	}
	
	//点击管理老师
	function onClickManageTeacher() {
		uni.navigateTo({
			url:"/pages/manageTeacherList/manageTeacherList"
		})
	}
	
	//点击修改用户名
	function onClickModifyUserName(){
		modifyDialog.value.open()
	}
	
	const confirm = async () => { 
		// success: async (res) => {
		// 	if(res.result.code === 200){
		// 		uni.showToast({
		// 		  title: '用户名更新成功',
		// 		  icon: 'success'
		// 		});
		// 		const userInfoRes = await uniCloud.callFunction({
		// 			name: 'getUserInfo',
		// 			data: {
		// 			  uuid: userInfoStore.userInfo.uuid
		// 			}
		// 		});
				
		// 		console.log(userInfoRes.result.data)
		// 		userInfoStore.userInfo.value = userInfoRes.result.data
		// 	}
		// }
		const res = await uniCloud.callFunction({
			name: "updateUserName",
			data: {
				uuid: userInfoStore.userInfo.uuid,
				userName: inputValue.value
			},
			
		})
			
		if(res.result.code === 200){
			uni.showToast({
			  title: '用户名更新成功',
			  icon: 'success'
			});
			const userInfoRes = await uniCloud.callFunction({
				name: 'getUserInfo',
				data: {
				  uuid: userInfoStore.userInfo.uuid
				}
			});
			userInfoStore.setUserInfo(userInfoRes.result.data)
		}
		
		modifyDialog.value.close()
		// inputValue.value = ''
	}
	
		
	function cancel(){
		modifyDialog.value.close()
		// inputValue.value = ''
	}
	
</script>

<style lang="scss" scoped>
	.layout{
		display: flex;
		flex-direction: column;
		align-items: center;
		.name{
			margin-top: 20rpx;
			margin-bottom: 60rpx;
		}
		image{
			width: 250rpx;
			height: 250rpx;
			border-radius: 50%;
		}
			
		.optionsArea{
			width: 100%;
			.optionItem{
				padding: 20rpx 20rpx;
				margin: 20rpx;
				background-color: white;
				border: 2rpx solid #18BB7C;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
				.itemLeft{
					display: flex;
					justify-content: space-between;
				}
				.itemRight{
					display: flex;
					justify-content: flex-end;
					text-align: right;
					// justify-content: space-between;
				}
			}
			.wxButton{
				display: flex;
				justify-content: center;
				padding: 40rpx 0;
				margin: 40rpx 40rpx 0rpx 40rpx;
				background-color: #18BB7C;
				color: white;
				border-radius: 60rpx;
				font-size: 40rpx;
			}
			.logout{
				display: flex;
				justify-content: center;
				padding: 40rpx 0;
				margin: 40rpx 40rpx 0rpx 40rpx;
				background-color: #F6465D;
				color: white;
				border-radius: 60rpx;
				font-size: 40rpx;
			}
		}
		
		.modifyDialog{
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 50rpx;
			padding: 40rpx;
			background-color: white;
			border-radius: 50rpx;
			.input{
				text-align: center;
				padding: 10px 0;
				font-size: 20px;
				border: 2px solid #ccc;
				border-radius: 10px;
			}
			.title{
				color: black;
				font-size: 24px;
			}
			.buttonRow{
				display: flex;
				flex-direction: row;
				gap: 30rpx;
				.confirm{
					padding: 15rpx 50rpx;
					border-radius: 50rpx;
					background-color: #18BB7C;
					color: white;
					font-size: 24px;
				}
				.cancel{
					padding: 15rpx 50rpx;
					border-radius: 50rpx;
					background-color: #F6465D;
					color: white;
					font-size: 24px;
				}
			}
		}
	}
</style>
